<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户详情</title>
    <link rel="stylesheet" href="../css/black.css" />
    <style>
        .btn-yellow {
            background-color: #FFC000;
            color: black;
        }

        .btn-gray {
            background-color: #A5A5A5;
            color: white;
        }

        .btn-dark-gray {
            background-color: #44546A;
        }

        .btn-black {
            background-color: #000000;
        }

        .btn-skyblue {
            background-color: #00B0F0;
        }

        .btn-dark-blue {
            background-color: #0070C0
        }

        .inf-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 10px;
            font-size: 15px;
        }

        .gj {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

        h3 {
            margin: 20px 0px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="toolbar">
            <button class="btn btn-yellow">编辑</button>
            <button class="btn btn-red">删除</button>
            <button class="btn btn-green">改为已成交</button>
            <button class="btn btn-gray">改为未成交</button>
            <button class="btn btn-dark-gray">变更责任人</button>
            <button class="btn btn-black">锁定</button>
            <button class="btn btn-skyblue">解锁</button>
            <button class="btn btn-dark-blue">放入公海</button>
        </div>
        <div class="information">
            <h3>客户基本信息</h3>
            <div class="inf-grid">
                <div class="rol">客户名称</div>
                <div class="rol">xxxxx</div>
                <div class="rol">负责人</div>
                <div class="rol">xxxxx</div>
                <div class="rol">客户来源</div>
                <div class="rol">xxxxx</div>
                <div class="rol">锁定状态</div>
                <div class="rol">未锁定</div>
                <div class="rol">网址</div>
                <div class="rol">xxxxx</div>
                <div class="rol">成交状态</div>
                <div class="rol">未成交</div>
                <div class="rol">地区</div>
                <div class="rol">xxx省xxx市 xxx区</div>
                <div class="rol">联系电话</div>
                <div class="rol">xxxxx</div>
                <div class="rol">联系地址</div>
                <div class="rol">xxxxx</div>
                <div class="rol">下次联系时间</div>
                <div class="rol">xxxxx</div>
                <div class="rol">备注</div>
                <div class="rol content">xxxxx</div>
            </div>
        </div>
        <div class="contact">
            <h3>联系人</h3>
            <table class="table">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>职务</th>
                        <th>电话</th>
                        <th>性别</th>
                        <th>电子邮箱</th>
                        <th>是否为决策人</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxx</td>
                        <td>是</td>
                    </tr>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxx</td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxx</td>
                        <td>是</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="genjin">
            <h3>写跟进</h3>
            <div class="gj">
                <div class="item" style="width: 30%;">
                    <label for="" class="item-left">跟进时间</label>
                    <div class="item-right">
                        <input type="datetime-local" class="control" />
                    </div>
                </div>
                <div class="item" style="width: 30%;">
                    <label for="" class="item-left">联系人</label>
                    <div class="item-right">
                        <select class="control">
                            <option value="0"></option>
                        </select>
                    </div>
                </div>
                <div class="item" style="width: 30%;">
                    <label for="" class="item-left">跟进方式</label>
                    <div class="item-right">
                        <select class="control">
                            <option value="0"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="item">
                <label for="" class="item-left">跟进内容</label>
                <div class="item-right">
                    <textarea class="control"></textarea>
                </div>
            </div>
            <div class="item">
                <label for="" class="item-left">下次联系时间</label>
                <div class="item-right">
                    <input type="datetime-local" class="control" />
                </div>
            </div>
            <div class="item">
                <label for="" class="item-left"> </label>
                <div class="item-right">
                    <button class="btn btn-blue">提交</button>
                </div>
        </div>
    </div>
    <div>
        <h3>跟进记录</h3>
        <div>
            <table class="table">
                <thead>
                    <tr>
                        <th>跟进时间</th>
                        <th>联系人</th>
                        <th>跟进方式</th>
                        <th>跟进记录</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxxxxxxxxxxx</td>
                    </tr>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxxxxxxxxxxx</td>
                    </tr>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxxxxxxxxxxx</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>